<script setup lang="ts">
import { ref, onMounted, reactive, onUnmounted, computed, onBeforeUnmount, toRef, watch } from 'vue';
// import LivePlayer from '@liveqing/liveplayer-v3'
import webrtcPlayer from '#/components/WebrtcPlayer.vue'
import { ElRadio, ElRadioGroup, ElSlider, ElSwitch, ElMessage, ElTooltip, ElInput } from 'element-plus';
import { Promotion, Close } from '@element-plus/icons-vue'
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href
}
const emit = defineEmits(['send-data', 'getanyFunction', 'working'])
const props = defineProps({
  deviceData: Object,
  flyMethod: String,
  airInfo: Object,
});
// console.log(props.deviceData.videoAddress)
const Msg = (message: String, type = 'success', duration = 2000) => {
  ElMessage({
    message,
    appendTo: draggable.value,
    type,
    duration,
    grouping: true,
    customClass: 'custom-message',
  })
}

let videoAddress = ref('')
const dataType = ref([
  {
    name: '行人',
    num: 2,
    check: true,
  },
  {
    name: '人',
    num: 0,
    check: true,
  },
  {
    name: '自行车',
    num: 0,
    check: true,
  },
  {
    name: '汽车',
    num: 80,
    check: true,
  },
]);
const airInfo = toRef(props.airInfo)
const networkrate = computed(() => {
  try {
    if (airInfo.value.networkState) {
      const parsed = JSON.parse(airInfo.value.networkState);
      return parsed.rate || '0'; // 返回 rate 或默认值 '0'
    }
    return '0';
  } catch (e) {
    console.error('JSON.parse error:', e);
    return '0';
  }
});

let tanchuang = ref(false)
let player = '';
const videoRef = ref(null)
onMounted(() => {
  videoAddress.value = props.deviceData.droneVideoAddress
})

const camera_focal = 112;//最大焦距
const camera_focal_length = ref(camera_focal);//最大焦距

let video_type_item_choice = ref('wide');
const videoTypes = ref([
  { value: 'wide', label: '广角' },
  { value: 'zoom', label: '变焦' },
  { value: 'ir', label: '红外' },
])
const operation = ref({
  method: '',
  resetMode: 0,
  cameraType: 'wide',
  zoomFactor: 0,
  locked: true,
  pitchSpeed: 0,
  yawSpeed: 0,
  videoType: 'wide',
  "x1": 0,
  "y1": 0,
  "width": 0,
  "height": 0
})
const zoom_zoom = ref(1);
const ir_zoom = ref(1);
let video_type_item_clock = ref(false)
const choice_video_type = (key: string) => {
  if (!video_type_item_clock.value && video_type_item_choice.value != key) {
    video_type_item_clock.value = true;
    video_type_item_choice.value = key;
    operation.value.videoType = key;
    operation.value.cameraType = key;
    operation.value.method = 'liveLensChange'

    if (operation.value.cameraType == 'zoom') {
      operation.value.zoomFactor = zoom_zoom.value
      computedZoom.value = operation.value.zoomFactor
    }
    if (operation.value.cameraType == 'ir') {
      operation.value.zoomFactor = ir_zoom.value
      computedZoom.value = operation.value.zoomFactor
    }
    set_camera_data();
    try {
      set_sliderMarks()
      sendToSibling()
      operation.value.method = 'cameraFocalLengthSet';
      sendToSibling()
      setTimeout(() => {
        video_type_item_clock.value = false;
      }, 500);
    } catch {
      video_type_item_clock.value = false;
    }
  }
}

// 拖拽视角
// 拖动元素的引用
const draggable = ref(null); //公用的
// 拖动距离
const distance = reactive({
  x: 0,
  y: 0,
});

// 拖动状态
const isDragging = ref(false);
// const isDragging_clock = ref(false);
let initialMouseX = 0;
let initialMouseY = 0;
// let lastDragTime = 0;
// const throttleDelay = 500; // 500 毫秒节流

// 圆点和箭头的位置
const circleStyle = reactive({
  left: 0,
  top: 0,
});
const currentPoint = reactive({ x: 0, y: 0 }); // 当前鼠标位置

// 计算箭头旋转角度
const arrowRotation = computed(() => {
  const dx = currentPoint.x - circleStyle.left;
  const dy = currentPoint.y - circleStyle.top;
  return (Math.atan2(dy, dx) * 180) / Math.PI; // 转换为度
});

// 是否显示箭头
const showArrow = computed(() => {
  const dx = currentPoint.x - circleStyle.left;
  const dy = currentPoint.y - circleStyle.top;
  return (Math.sqrt(dx * dx + dy * dy) > 5) && isDragging.value === true; // 距离大于 5 像素时显示箭头
});
// Z输出方法
let cameraScreenDragsending = false;
let cameraScreenDragTimeout;

const start_cameraScreenDragsending = () => {
  if (!isDragging.value) return;
  // console.log(`distance.x: ${distance.x}, distance.y: ${distance.y}`)
  operation.value.pitchSpeed = distance.x;
  operation.value.yawSpeed = distance.y;
  operation.value.method = 'cameraScreenDrag';
  resetMode.value = '';//视角方向
  try {
    sendToSibling();
    cameraScreenDragTimeout = setTimeout(() => {
      start_cameraScreenDragsending()
    }, 100);
  } catch {

  }
  operation.value.pitchSpeed = 0;
  operation.value.yawSpeed = 0;
}
onBeforeUnmount(() => {
  if (cameraScreenDragTimeout) clearTimeout(cameraScreenDragTimeout)
})
let startDraggingTimeout;
let clickTimer = null;
let clickCount = 0;
let isPressing = false;
let pressTimer = null;

const onceClick_box = ref(false);
const twiceClick_box = ref(false);
let onceClick_event;
const onceClickStyle = reactive({
  left: 0,
  top: 0,
});
// 画面拖动控制
// 开始拖动
const startDragging = (event) => {
  if (event.button !== 0 && !isRDragging) return; // 只响应左键 && isRDragging不能同步运行
  onceClick_event = event;
  isPressing = true;
  // 设置一个计时器，如果按住时间超过200ms，则不视为单击
  pressTimer = setTimeout(() => {
    isPressing = false;
    clickCount = 0;
    if (clickTimer) {
      clearTimeout(clickTimer);
      clickTimer = null;
    }
  }, 200);
  // event.preventDefault(); // 阻止默认事件
  // const now = Date.now();
  // if (now - lastDragTime < throttleDelay) {
  //   isDragging_clock.value = true;
  //   return;
  // }
  // isDragging_clock.value = false;
  startDraggingTimeout = setTimeout(() => {
    clickCount = 0;
    isDragging.value = true;
    initialMouseX = event.clientX;
    initialMouseY = event.clientY;
    circleStyle.left = event.offsetX; // 相对于容器的坐标
    circleStyle.top = event.offsetY;
    currentPoint.x = event.offsetX;
    currentPoint.y = event.offsetY;
    distance.x = 0;
    distance.y = 0;
  }, 250);
  // 监听全局 mousemove 和 mouseup 事件
  window.addEventListener('mousemove', onDrag);
  window.addEventListener('mouseup', stopDragging);
  draggable.value.addEventListener('mouseleave', stopDragging);
};

// 拖动中
const onDrag = (event) => {
  if (isDragging.value) {
    // 计算相对于容器的当前鼠标位置
    const rect = draggable.value.getBoundingClientRect();
    currentPoint.x = event.clientX - rect.left;
    currentPoint.y = event.clientY - rect.top;

    // 计算拖动距离
    distance.x = -(event.clientY - initialMouseY) / 10;
    distance.y = (event.clientX - initialMouseX) / 10;

    if (showArrow && !cameraScreenDragsending) {
      cameraScreenDragsending = true;
      start_cameraScreenDragsending()
    }
    // 打印 x, y 值
    // console.log(`distance.x: ${distance.x}, distance.y: ${distance.y}`);
  }
};
// 停止拖动调用的方法
const seed_click_fun = (num) => {
  getdraggablegetBoundingClientRect();//重新获取页面元素信息
  onceClickStyle.left = onceClick_event.clientX - draggableOffsetX;
  onceClickStyle.top = onceClick_event.clientY - draggableOffsetY;
  const normalizedX = draggableWidth ? (onceClickStyle.left / draggableWidth).toFixed(6) : 0;
  const normalizedY = draggableHeight ? (onceClickStyle.top / draggableHeight).toFixed(6) : 0;
  if (num === 1) {
    onceClick_box.value = true;
    setTimeout(() => {
      onceClick_box.value = false;
    }, 1000);
    operation.value.method = "cameraPointFocusAction"
    operation.value.cameraType = "zoom"
    operation.value.videoType = "zoom"
    operation.value.x1 = normalizedX
    operation.value.y1 = normalizedY
  } else if (num === 2) {
    twiceClick_box.value = true;
    setTimeout(() => {
      twiceClick_box.value = false;
    }, 1000);
    operation.value.method = "cameraAim"
    operation.value.cameraType = "zoom"
    operation.value.videoType = "zoom"
    operation.value.locked = true
    operation.value.x1 = normalizedX
    operation.value.y1 = normalizedY
  }
  sendToSibling();
}
// 停止拖动
const stopDragging = () => {
  clearTimeout(pressTimer);
  if (isPressing) {
    clickCount++;
    // 清除之前的单击计时器
    if (clickTimer) clearTimeout(clickTimer);
    // 设置新的计时器
    clickTimer = setTimeout(() => {
      if (clickCount === 1) {
        // 单击事件
        // console.log('单击事件');
        seed_click_fun(1)
      } else if (clickCount >= 2) {
        // 双击事件
        // console.log('双击事件');
        // seed_click_fun(2)
      }
      // 重置计数器
      clickCount = 0;
    }, 250);
  }
  isPressing = false;
  if (startDraggingTimeout) clearTimeout(startDraggingTimeout)
  if (isDragging.value) {
    isDragging.value = false;
    // lastDragTime = Date.now();
  }
  cameraScreenDragsending = false;
  window.removeEventListener('mousemove', onDrag);
  window.removeEventListener('mouseup', stopDragging);
  draggable.value.removeEventListener('mouseleave', stopDragging);
};

// 功能分割线===========================================================================
// 滚动滚轮变焦
// 焦距刻度
const sliderMarks = ref({})
const highlightMode = ref('');
const set_sliderMarks = () => {
  sliderMarks.value = {};
  const isIr = operation.value.cameraType == 'ir';
  const focalLength = camera_focal_length.value;

  const marks = isIr
    ? { 0: '1X', 25: '3X', 50: '7X', 75: '10X', 100: '20X' }
    : focalLength === 56
      ? { 0: '1X', 25: '3X', 50: '7X', 75: '14X', 100: '56X' }
      : { 0: '1X', 20: '3X', 40: '7X', 60: '14X', 80: '56X', 100: '112X' };

  for (let i = 0; i <= 100; i++) {
    sliderMarks.value[i] = marks[i] || '';
  }
  highlightMode.value = isIr ? 'ir' : focalLength === 56 ? 'f56' : 'f112';
};
onMounted(() => {
  set_sliderMarks()
})
// 滚轮处理
let accumulatedWheel = 1;
// 滚轮回调
const onWheelChange = (value) => {
  if (operation.value.cameraType == 'wide') return
  if (operation.value.zoomFactor == value) return
  // console.log(`滚轮值: ${value}`);
  // if (operation.value.cameraType != 'zoom' && operation.value.cameraType != 'ir') return
  // choice_video_type('zoom');
  operation.value.method = 'cameraFocalLengthSet';
  operation.value.zoomFactor = value;
  if (operation.value.cameraType == 'zoom') {
    zoom_zoom.value = value
  }
  if (operation.value.cameraType == 'ir') {
    ir_zoom.value = value
  }
  accumulatedWheel = value;
  console.log(zoom_zoom.value, ir_zoom.value, computedZoom.value)
  set_camera_data();
  try {
    sendToSibling();
  } catch {

  }
};
const sliderValue = ref(0); // 绑定滑块，假设范围 0-100，例如 <input type="range" min="0" max="100" v-model="sliderValue">
const computedZoom = computed({
  get() {
    const isIr = operation.value.cameraType === 'ir';
    const maxZoom = isIr ? 20 : camera_focal_length.value;
    const position = sliderValue.value / 100; // 归一化到 0-1

    // 动态选择 breakpoints 和 zoomValues
    let breakpoints, zoomValues;
    if (camera_focal_length.value === 56 && !isIr) {
      breakpoints = [0, 0.25, 0.5, 0.75, 1.0]; // 0, 25, 50, 75, 100
      zoomValues = [1, 3, 7, 14, 56];
    } else if (isIr && maxZoom === 20) {
      breakpoints = [0, 0.25, 0.5, 0.75, 1.0]; // 0, 25, 50, 75, 100
      zoomValues = [1, 3, 7, 10, 20];
    } else { // camera_focal_length = 112 && !isIr
      breakpoints = [0, 0.2, 0.4, 0.6, 0.8, 1.0]; // 0, 20, 40, 60, 80, 100
      zoomValues = [1, 3, 7, 14, 56, 112];
    }

    // 找到当前 position 所在的区间
    let index = 0;
    while (index < breakpoints.length - 1 && position > breakpoints[index + 1]) index++;

    // 线性插值计算 zoom
    const t = (position - breakpoints[index]) / (breakpoints[index + 1] - breakpoints[index]);
    const zoom = zoomValues[index] + t * (zoomValues[index + 1] - zoomValues[index]);

    return Math.min(Math.round(zoom * 10) / 10, maxZoom); // 保留一位小数，限制不超过 maxZoom
  },
  set(newZoom) {
    if (newZoom === 1) {
      sliderValue.value = 0;
      return;
    }
    const isIr = operation.value.cameraType === 'ir';
    const maxZoom = isIr ? 20 : camera_focal_length.value;
    newZoom = Math.max(1, Math.min(maxZoom, newZoom));

    let low = 0, high = 100, mid;
    for (let i = 0; i < 20; i++) {
      mid = (low + high) / 2;
      sliderValue.value = mid;
      const currentZoom = computedZoom.value;
      if (Math.abs(currentZoom - newZoom) < 0.1) break;
      if (currentZoom < newZoom) low = mid;
      else high = mid;
    }
    sliderValue.value = Math.round(mid);
  }
});
// if (localStorage.getItem('jcbsYjqfOperation')) {
//   // 上面还有
//   computedZoom.value = operation.value.zoomFactor
// }
const handleWheel = (e) => {
  e.preventDefault(); // 防止页面滚动
  // 累积滚轮移动量
  if (e.deltaY < 0) {
    // 向上滚动
    if (operation.value.cameraType == 'wide') {
      choice_video_type('zoom')
    }
    if (computedZoom.value < (operation.value.cameraType === 'ir' ? 20 : 112)) {
      sliderValue.value++
      onWheelChange(computedZoom.value);
    }
  } else if (e.deltaY > 0) {
    // 向下滚动
    if (sliderValue.value > 0) {
      sliderValue.value--
      onWheelChange(computedZoom.value);
    } else if (operation.value.cameraType == 'zoom') {
      choice_video_type('wide')
    }
  }
};
// 功能分割线===========================================================================
// 功能分割线===========================================================================
// 右键框选变焦
// 定义 ref 和状态
const showRect = ref(false);
const rectStyle = reactive({
  left: 0,
  top: 0,
  width: 0,
  height: 0
});
let isRDragging = false;
let startX = 0;
let startY = 0;
let draggableWidth = 0;
let draggableHeight = 0;
let draggableOffsetX = 0;
let draggableOffsetY = 0;

// 初始化 draggable 元素尺寸和偏移，添加 mouseleave 事件
const getdraggablegetBoundingClientRect = () => {
  const rect = draggable.value.getBoundingClientRect();
  draggableWidth = rect.width;
  draggableHeight = rect.height;
  draggableOffsetX = rect.left;
  draggableOffsetY = rect.top;
}
onMounted(() => {
  getdraggablegetBoundingClientRect()
  draggable.value.addEventListener('mouseleave', (event) => {
    if (isRDragging) {
      endDragging(event, '右键拖动移出元素，结束操作');
    }
  });
});

// 禁用右键菜单
const onContextMenu = (event) => {
  event.preventDefault();
};

// 右键按下
const onRightMouseDown = (event) => {
  if (event.button !== 2) return;
  isRDragging = true;
  getdraggablegetBoundingClientRect()
  startX = event.clientX - draggableOffsetX;
  startY = event.clientY - draggableOffsetY;
  showRect.value = true;
  rectStyle.left = startX;
  rectStyle.top = startY;
  rectStyle.width = 0;
  rectStyle.height = 0;
};

// 鼠标移动（拖动）
const onMouseMove = (event) => {
  if (!isRDragging || event.buttons !== 2) return;
  const currentX = Math.min(Math.max(0, event.clientX - draggableOffsetX), draggableWidth);
  const currentY = Math.min(Math.max(0, event.clientY - draggableOffsetY), draggableHeight);
  rectStyle.left = Math.min(startX, currentX);
  rectStyle.top = Math.min(startY, currentY);
  rectStyle.width = Math.abs(currentX - startX);
  rectStyle.height = Math.abs(currentY - startY);
};

// 右键抬起
const onRightMouseUp = (event) => {
  if (event.button !== 2) return;

  endDragging(event, '右键抬起');
};

// 结束拖动操作
const endDragging = (event, message) => {
  isRDragging = false;
  showRect.value = false;

  // 归一化坐标和宽高
  const normalizedX = draggableWidth ? (rectStyle.left / draggableWidth).toFixed(6) : 0;
  const normalizedY = draggableHeight ? (rectStyle.top / draggableHeight).toFixed(6) : 0;
  const normalizedWidth = draggableWidth ? (rectStyle.width / draggableWidth).toFixed(6) : 0;
  const normalizedHeight = draggableHeight ? (rectStyle.height / draggableHeight).toFixed(6) : 0;
  if (normalizedWidth == 0 || normalizedHeight == 0) {
    return false
  }
  // 输出目标框信息
  // console.log({
  //   '目标框左上角点坐标x': normalizedX,
  //   '目标框左上角点坐标y': normalizedY,
  //   '目标框宽width': normalizedWidth,
  //   '目标框高度height': normalizedHeight
  // });
  if (operation.value.cameraType == 'wide') {
    choice_video_type('zoom');
  }
  // console.log(operation.value.cameraType)
  operation.value.x1 = normalizedX;
  operation.value.y1 = normalizedY;
  operation.value.width = normalizedWidth;
  operation.value.height = normalizedHeight;
  operation.value.method = 'cameraFrameZoom'
  try {
    sendToSibling();
  } catch {

  }
  operation.value.x1 = 0;
  operation.value.y1 = 0;
  operation.value.width = 0;
  operation.value.height = 0;
};

// {"0":"回中","1":"向下","2":"偏航回中","3":"俯仰向下"}
const resetMode = ref(0)
const resetMode_clock = ref(false)
const changeresetMode_box = ref(false)
const changeresetMode = (num) => {
  resetMode_clock.value = true
  resetMode.value = num;
  // console.log(resetMode.value)
  setTimeout(() => {
    operation.value.method = "gimbalReset"
    operation.value.resetMode = resetMode.value
    resetMode_clock.value = false
    try {
      sendToSibling();
    } catch {

    }
  }, 1000);
}


// const send_switch = () => {
//   operation.value.method = 'cameraScreenDrag'
//   try {
//     sendToSibling();
//   } catch {

//   }
// }
// 功能分割线===========================================================================

//           <!-- 开始拍照：cameraPhotoTake
//  结束拍照：cameraPhotoStop
//  开始录像：cameraRecordingStart
//  结束录像：cameraRecordingStop -->
//           <!-- 切换相机模式
// ：cameraModeSwitch
// cameraMode
// 多这一个参数 
// {"0":"拍照","1":"录像","2":"智能低光","3":"全景拍照"} -->
const cameraOption = ref({
  method: '',
  cameraMode: 0
})
// 相机拍照录像
const camera_list = ref({
  0: '录像',
  1: '单拍',
  2: '定时拍',
  3: '智能低光',
  4: '全景',
})
const camera_time_list = ref({
  0: 0.7,
  1: 1,
  2: 2,
  3: 3,
  4: 5,
  5: 7,
  6: 10,
  7: 15,
  8: 20,
  9: 30,
  10: 60,
})
const take_pic_time_ing = ref(false);
const camera_time_S = ref(0)
const camera_type = ref(1);
const camera_time_index = ref();
const camera_type_show = ref(false);
const camera_timeout_show = ref(false);
const toggleCameraTypeShow = () => {
  if (take_pic_time_ing.value) return;
  if (camera_type_show.value == true) {
    camera_type_show.value = false
    camera_timeout_show.value = false
  } else {
    camera_type_show.value = true
    if (camera_type.value == 2) {
      camera_timeout_show.value = true;
    }
  }
  set_camera_data()
};
const select_camera_type = (index: number) => {
  if (take_pic_time_ing.value) return;
  if (index == 2) {
    camera_timeout_show.value = true;
    set_camera_data()
    return
  } else {
    camera_timeout_show.value = false;
    camera_type_show.value = false;
  }
  // 展示连拍时间列表
  camera_type.value = index;
  camera_time_index.value = '';
  camera_time_S.value = 0;
  cameraOption.value.method = 'cameraModeSwitch';
  // 接口
  // {"0":"拍照","1":"录像","2":"智能低光","3":"全景拍照"}
  // 选项
  // 0: '录像',
  // 1: '单拍',
  // 2: '定时拍',
  // 3: '智能低光',
  // 4: '全景',
  // cameraOption.value.cameraMode = camera_type.value
  // 设置拍照模式
  if (camera_type.value == 1) {
    cameraOption.value.cameraMode = 0
    sendCamoraData();
  } else if (camera_type.value == 0) {
    cameraOption.value.cameraMode = 1
    sendCamoraData();
  } else if (camera_type.value == 3) {
    cameraOption.value.cameraMode = 2
    sendCamoraData();
  } else if (camera_type.value == 4) {
    cameraOption.value.cameraMode = 3
    sendCamoraData();
  }
  set_camera_data()
}

const select_timeout_type = (index: number) => {
  camera_time_index.value = index;
  camera_time_S.value = camera_time_list.value[index];
  take_pic_time_num.value = camera_time_S.value * 10
  camera_timeout_show.value = false;
  camera_type_show.value = false;

  camera_type.value = 2;
  cameraOption.value.method = 'cameraModeSwitch';
  // 设置拍照模式
  cameraOption.value.cameraMode = 0
  sendCamoraData();
  set_camera_data()
}
let take_recording_time; // 录像计时器
let take_pic_time; // 定时拍照计时器
const take_pic = () => {
  camera_timeout_show.value = false;
  camera_type_show.value = false;
  if (camera_type.value == 0) {
    // 录像
    if (take_pic_time_ing.value) {
      stopRecording()
    } else {
      startRecording();
    }
  } else if (camera_type.value == 1) {
    // 拍照
    Msg('拍照完成', 'success', 800)
    cameraOption.value.method = 'cameraPhotoTake';
    sendCamoraData();
  } else if (camera_type.value == 2) {
    // 定时拍
    if (take_pic_time_ing.value) {
      clearInterval(take_pic_time)
      take_pic_time_num.value = camera_time_S.value * 10;
      take_pic_time_ing.value = false;
    } else {
      to_take_pic_timeintervale()
    }
  } else if (camera_type.value == 3) {
    // 智能低光
    Msg('拍照完成', 'success', 800)
    cameraOption.value.method = 'cameraPhotoTake';
    sendCamoraData();
  } else if (camera_type.value == 4) {
    // 全景
    if (take_pic_time_ing.value) {
      stop_quanjing();
    } else {
      start_quanjing();
    }
  }
  set_camera_data()
}
// 录像
const recording_time = ref('00:00');
const stopRecording = () => {
  Msg('录像完成')
  cameraOption.value.method = 'cameraRecordingStop'
  clearInterval(take_recording_time);
  take_pic_time_ing.value = false;
  recording_time.value = '00:00'
  sendCamoraData();
  set_camera_data();
}
const startRecording = () => {
  Msg('开始录像', 'primary')
  take_pic_time_ing.value = true;
  cameraOption.value.method = 'cameraRecordingStart'
  sendCamoraData();
  let seconds = 0;
  const minutes = Math.floor(seconds / 60).toString().padStart(2, '0');
  const secs = (seconds % 60).toString().padStart(2, '0');
  recording_time.value = `${minutes}:${secs}`;
  seconds++;
  take_recording_time = setInterval(() => {
    if (seconds > 5400) {
      ElMessage.primary('您已录像超过90分钟，已为您自动停止');
      stopRecording();
      return false;
    }
    const minutes = Math.floor(seconds / 60).toString().padStart(2, '0');
    const secs = (seconds % 60).toString().padStart(2, '0');
    recording_time.value = `${minutes}:${secs}`;
    seconds++;
  }, 1000);
  set_camera_data();
};

// 定时拍照
const take_pic_time_num = ref(0);
const camera_time_S_show = computed(() => {
  if (take_pic_time_ing.value) {
    if (take_pic_time_num.value > 10) {
      return Math.ceil(take_pic_time_num.value / 10) + 'S'
    } else {
      return (take_pic_time_num.value / 10) + 'S'
    }
  }
  return camera_time_S.value ? camera_time_S.value + 'S' : ''
})
const to_take_pic_timeintervale = () => {
  take_pic_time = setInterval(() => {
    take_pic_time_ing.value = true
    if (take_pic_time_num.value <= 0) {
      take_pic_time_num.value = camera_time_S.value * 10
      Msg('拍照成功', 'success', 800)
      cameraOption.value.method = 'cameraPhotoTake';
      sendCamoraData();
    }
    take_pic_time_num.value -= 1;
  }, 100);
}
onBeforeUnmount(() => {
  if (take_pic_time) clearInterval(take_pic_time);
  if (take_recording_time) clearInterval(take_recording_time);
})

// 全景图
const pic_percentage = ref(0);
const qj_ElMessage = ref();
const start_quanjing = () => {
  qj_ElMessage.value = ElMessage({
    message: '全景拍照中',
    appendTo: draggable.value,
    type: 'primary',
    duration: 0,
    grouping: true,
    customClass: 'custom-message',
  })
  take_pic_time_ing.value = true;
  cameraOption.value.method = 'cameraPhotoTake';
  sendCamoraData();
  set_camera_data();
}
const stop_quanjing = () => {
  if (qj_ElMessage.value) {
    qj_ElMessage.value.close()
  };
  ElMessage({
    message: '停止全景拍摄',
    appendTo: draggable.value,
    type: 'info',
    duration: 1000,
    grouping: true,
    customClass: 'custom-message',
  })
  take_pic_time_ing.value = false;
  cameraOption.value.method = 'cameraPhotoStop';
  sendCamoraData();
  set_camera_data();
  choice_video_type('zoom')
}
// 功能分割线===========================================================================
// 喊话器
const speaker_box = ref(false);
const open_hanhua = () => {
  if (hanhuaqiBox.value && !speaker_box.value) {
    const targetElement = hanhuaqiBox.value
    if (targetElement) {
      const rect = targetElement.getBoundingClientRect()
      speakposition.x = rect.right + window.scrollX + 20 // 右边界
      speakposition.y = rect.top + window.scrollY - 10// 与顶部对齐
    }
  }
  speaker_box.value = !speaker_box.value;
}
const close_hanhua = () => {
  speaker_box.value = false;
}
const speaker = reactive({
  type: 1, // 1 实时喊话 2 文件喊话
  level: 1, // 1 最高级 2添加录音，文本转换 用来判断返回上一级按钮显示
  speaking: 1, //1 未讲话 2正在讲话
  speakingtext: '',
  recordToSpeak: 1, //1 未录制实时喊话 2正在录制实时喊话
  fileList: [], // 文件列表
})
const speaker_form = ref({
  playVolume: 20,//音量
  playMode: 0,//喊话器播发模式设置 0 单次播放 1循环播放
  name: "",
  text: "",//TTS文本
  url: "",
  md5: ""
})


const speakdraggable = ref(null)
const hanhuaqiBox = ref(null)
const speakposition = reactive({ x: 0, y: 0 })
const speakisDragging = ref(false)
const speakoffset = reactive({ x: 0, y: 0 })
onMounted(() => {
  if (hanhuaqiBox.value) {
    const targetElement = hanhuaqiBox.value
    if (targetElement) {
      const rect = targetElement.getBoundingClientRect()
      speakposition.x = rect.right + window.scrollX + 50 // 右边界
      speakposition.y = rect.top + window.scrollY - 10// 与顶部对齐
    }
  }
})
const speakstartDrag = (event) => {
  speakisDragging.value = true
  speakoffset.x = event.clientX - speakposition.x
  speakoffset.y = event.clientY - speakposition.y

  document.addEventListener('mousemove', speakonDrag)
  document.addEventListener('mouseup', speakstopDrag)
}
const speakonDrag = (event) => {
  if (speakisDragging.value) {
    speakposition.x = event.clientX - speakoffset.x
    speakposition.y = event.clientY - speakoffset.y
  }
}
const speakstopDrag = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', speakonDrag)
  document.removeEventListener('mouseup', speakstopDrag)
}
// 发送文字
const start_speak = () => {
  if (speaker.speaking == 2) return;
  speaker.speaking = 2;
  speaker.speakingtext = '加载中'
  emit('getanyFunction', {
    method: 'speakerTtsPlayStart',
    name: speaker_form.value.name,
    text: speaker_form.value.text
  })
}
// 调音量
const speakerAudioPlayStart = () => {
  emit('getanyFunction', {
    method: 'speakerPlayVolumeSet',
    playVolume: speaker_form.value.playVolume,
  })
}
let step_key = {
  "tts_processing": '文字转语音中',
  "change_work_mode": "切换工作模式", "download": "从云端下载音频文件到机场", "encoding": "正在编码", "play": "开始播放", "upload": "正在上传音频"//"机场上传音频到psdk" 
}
// 获取讲话进度
const setvideoSpeak = (data) => {
  // if (data.method == "speaker_tts_play_start_progress") {
  //   console.log('tts', data.data.output.status, data.data.output.progress.step_key, data.data.output.progress.percent)
  // }
  // if (data.method == "speaker_audio_play_start_progress") {
  //   console.log('audio', data.data.output.status, data.data.output.progress.step_key, data.data.output.progress.percent)
  // }
  // speaker.speakingtext = step_key[data.data.output.progress.step_key]
  console.log(data.data.output.progress.step_key)
  speaker.speakingtext = step_key[data.data.output.progress.step_key] + ' ' + data.data.output.progress.percent + '%'
  if (data.method == "speaker_audio_play_start_progress") {
    // console.log('audio', data.data.output.status, data.data.output.progress.step_key, data.data.output.progress.percent)
    if (data.data.output.status == 'success') {
      speaker.speaking = 1
      speaker.speakingtext = ''
    }
  }
}


// 功能分割线===========================================================================
// 数据存储
onUnmounted(() => {
  localStorage.removeItem('jcbsYjqfOperation');
});
const camera_component_data = ref({
  time: 0,
  camera_type: '',
  camera_timeout_show: '',
  take_pic_time_ing: '',
  zoom_factor: '',
  ir_zoom_factor: '',
})
// 拍照录像功能
const set_camera_data = () => {
  camera_component_data.value.time = Date.parse(new Date()) / 1000;
  camera_component_data.value.camera_type = camera_type.value;
  camera_component_data.value.camera_timeout_show = camera_timeout_show.value;
  camera_component_data.value.take_pic_time_ing = take_pic_time_ing.value;
  // if (operation.value.videoType == 'zoom') {
  //   camera_component_data.value.zoom_factor = computedZoom.value;
  // } else if (operation.value.videoType == 'ir') {
  //   camera_component_data.value.ir_zoom_factor = computedZoom.value;
  // }
  camera_component_data.value.zoom_factor = zoom_zoom.value
  camera_component_data.value.ir_zoom_factor = ir_zoom.value
  localStorage.setItem('jcbsYjqfOperation', JSON.stringify({ operation: operation.value, camera_component_data: camera_component_data.value }))
}
const startVideo_for_ls = (time) => {
  cameraOption.value.method = 'cameraRecordingStart'
  let seconds = (Date.parse(new Date()) / 1000) - Number(time);
  const minutes = Math.floor(seconds / 60).toString().padStart(2, '0');
  const secs = (seconds % 60).toString().padStart(2, '0');
  recording_time.value = `${minutes}:${secs}`;
  take_recording_time = setInterval(() => {
    if (seconds > 5400) {
      ElMessage.primary('您已录像超过90分钟，已为您自动停止');
      stopRecording();
      return false;
    }
    const minutes = Math.floor(seconds / 60).toString().padStart(2, '0');
    const secs = (seconds % 60).toString().padStart(2, '0');
    recording_time.value = `${minutes}:${secs}`;
    seconds++;
  }, 1000);
  set_camera_data();
}
if (localStorage.getItem('jcbsYjqfOperation')) {
  // console.log(JSON.parse(localStorage.getItem('jcbsYjqfOperation')))
  let data = JSON.parse(localStorage.getItem('jcbsYjqfOperation'))
  if (data.operation) {
    operation.value = data.operation;
    video_type_item_choice.value = operation.value.cameraType;
    choice_video_type(operation.value.cameraType);
    // computedZoom.value = operation.value.zoomFactor
  }
  if (data.camera_component_data) {
    if (data.camera_component_data.camera_type != '') camera_type.value = data.camera_component_data.camera_type
    if (data.camera_component_data.camera_timeout_show != '') camera_timeout_show.value = data.camera_component_data.camera_timeout_show
    if (data.camera_component_data.take_pic_time_ing != '') take_pic_time_ing.value = data.camera_component_data.take_pic_time_ing
    zoom_zoom.value = data.camera_component_data.zoom_factor != '' ? data.camera_component_data.zoom_factor : 1
    ir_zoom.value = data.camera_component_data.ir_zoom_factor != '' ? data.camera_component_data.ir_zoom_factor : 1
    // console.log(zoom_zoom.value, ir_zoom.value)
    if (operation.value.videoType == 'zoom') {
      if (data.camera_component_data.zoom_factor != '') computedZoom.value = data.camera_component_data.zoom_factor
    } else if (operation.value.videoType == 'ir') {
      if (data.camera_component_data.ir_zoom_factor != '') computedZoom.value = data.camera_component_data.ir_zoom_factor
    }
    if (data.camera_component_data.camera_type == '0' && data.camera_component_data.take_pic_time_ing) {
      startVideo_for_ls(data.camera_component_data.time)
    }
  }
}
watch(
  () => operation.value,
  (newValue, oldValue) => {
    // newValue === 
    localStorage.setItem('jcbsYjqfOperation', JSON.stringify({ operation: newValue, camera_component_data: camera_component_data.value }))
  },
  { deep: true }
)
// 功能分割线===========================================================================
// 数据交互
const sendToSibling = () => {
  emit('send-data', operation.value)
}
// socket数据赋值
const setVideoData = (param) => {
  const { zoom_factor, ir_zoom_factor, percent } = param
  if (operation.value.method == 'cameraFrameZoom') {
    if (operation.value.cameraType == 'ir' && ir_zoom_factor) {
      computedZoom.value = Math.round(ir_zoom_factor * 10) / 10
    } else if (zoom_factor) {
      computedZoom.value = Math.round(zoom_factor * 10) / 10
    }
  }
  if (percent && camera_type.value == 4 && take_pic_time_ing.value) {
    // 全景
    pic_percentage.value = Number(percent)
    if (percent >= 100) {
      qj_ElMessage.value.close()
      Msg('全景拍摄完成')
      take_pic_time_ing.value = false;
      pic_percentage.value = 0
    }
  }
}
const sendCamoraData = () => {
  if (cameraOption.value.method != 'cameraModeSwitch') cameraOption.value.cameraMode = ''
  emit('send-data', cameraOption.value)
}
watch(() => take_pic_time_ing.value, (e) => {
  emit('working', take_pic_time_ing.value)
})
defineExpose({
  setVideoData,
  setvideoSpeak
})

</script>
<template>
  <div class="container-box">
    <div class="container-title">
      <div class="container-title-left">
        <div class="circle"></div>
        <div class="text">{{ flyMethod ?? '检测中' }}</div>
      </div>
      <div class="container-title-right">
        <Sort style="width: 1vh; height: 1vh; margin-right: 1vh" />
        <div>{{ networkrate }} ms</div>
        <div class="vertical-line"></div>
        <!-- <Close style="width: 1.2em; height: 1.2em; margin-right: 10px" /> -->
      </div>
    </div>
    <div class="container-content">
      <div class="video">
        <div class="video-box-left">
          <!-- <div style="font-size: 1.5vh;padding-bottom: 2vh;">
            <div style="user-select: none;">相机锁定云台</div>
            <div style="display: flex;justify-content: center;">
              <ElSwitch v-model="operation.locked" @change="send_switch" :disabled="take_pic_time_ing" />
            </div>
          </div> -->
          <div style="font-size: 1.3vh;padding-bottom: 1vh;">镜头类型</div>
          <div class="video_type">
            <div class="video_type_item" v-for="item in videoTypes" :key="item.value"
              :class="{ choice: video_type_item_choice === item.value, clock: video_type_item_clock || take_pic_time_ing }"
              @click="choice_video_type(item.value)">
              {{ item.label }}
            </div>
          </div>
          <div class="video_direction">
            <!-- <Promotion style="font-size: 1vh;width: 3vh;" /> -->
            <div>视角方向</div>
            <div class="video_direction_list">
              <!-- :class="{ choice: resetMode == 0, clock: resetMode_clock }" -->
              <div class="video_direction_item" @click="changeresetMode(0)">
                居中
              </div>
              <!-- :class="{ choice: resetMode == 1, clock: resetMode_clock }" -->
              <div class="video_direction_item" @click="changeresetMode(1)">
                向下
              </div>
            </div>
            <!-- v-show="changeresetMode_box" -->
            <!-- <div style="font-size: 1.5vh;"></div> -->
            <!-- <ElRadioGroup v-model="resetMode" @change="changeresetMode" :disabled="resetMode_clock">
              <ElRadio :value="0" style="color: #FFFFFF;margin-right: 1vh;">居中</ElRadio>
              <ElRadio :value="1" style="color: #FFFFFF;">向下</ElRadio>
            </ElRadioGroup> -->
          </div>
          <div class="hanhuaqi_box" ref="hanhuaqiBox">
            <img class="icon" src="/static/u5.png" @click="open_hanhua">
            <div class="hanhuaqi_tc_box" ref="speakdraggable" v-show="speaker_box"
              :style="{ left: speakposition.x + 'px', top: speakposition.y + 'px' }">
              <div class="header_box">
                <div class="left_box">
                  <Close class="icon_x" @click="close_hanhua" />
                </div>
                <div class="center_box">
                  喊话器
                </div>
                <div class="right_box">
                  <Rank class="icon_x" @mousedown="speakstartDrag" />
                </div>
              </div>
              <div class="content_box">
                <!-- <div class="type_box">
                  <div class="type-item">
                    实时喊话
                  </div>
                  <div class="type-item">
                    文字喊话
                  </div>
                </div> -->
                <div class="input_box">
                  <ElInput v-model="speaker_form.text" style="width: 100%" :rows="4" type="textarea"
                    placeholder="请输入喊话文本" :maxlength="1000" show-word-limit :disabled="speaker.speaking == 2" />
                </div>
                <div class="button_box">
                  <div class="button" @click="start_speak" :class="{ 'disabled': speaker.speaking == 2 }">
                    {{ speaker.speakingtext ? speaker.speakingtext : '开始喊话' }}
                  </div>
                </div>
                <div class="volume_box">
                  <img class="volume_icon" src="/static/24gf-volumeMiddle.png">
                  <el-slider style="width: calc(100% - 2vh);" v-model="speaker_form.playVolume" :min="0" :max="100"
                    @change="speakerAudioPlayStart" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="video-box-center" id="video-box-center" ref="draggable" @mousedown.stop="startDragging"
          @touchstart="startDragging" @wheel="handleWheel" @contextmenu.prevent="onContextMenu"
          @mousedown.right="onRightMouseDown" @mousemove="onMouseMove" @mouseup.right="onRightMouseUp">
          <webrtcPlayer v-if="videoAddress" :videoId="'videoRef'" :videoSrc="videoAddress" :controls="false">
          </webrtcPlayer>
          <!-- cover :fit="'scale-down'" -->
          <div v-show="onceClick_box" class="onceClick_box" :style="{
            left: `${onceClickStyle.left}px`,
            top: `${onceClickStyle.top}px`,
          }">
            <div class="content">
              <div class="box box1"></div>
              <div class="box box2"></div>
              <div class="box box3"></div>
              <div class="box box4"></div>
            </div>
          </div>
          <div v-show="twiceClick_box" class="twiceClick_box" :style="{
            left: `${onceClickStyle.left}px`,
            top: `${onceClickStyle.top}px`,
          }">
            <div class="content"></div>
          </div>
          <div v-if="isDragging" class="icon_box" :style="{
            left: `${circleStyle.left}px`,
            top: `${circleStyle.top}px`,
          }">
            <div class="icon_content">
              <div class="circle_box"></div>
              <div class="CaretRight_box" :style="{
                transform: `rotate(${arrowRotation}deg)`,
                opacity: showArrow ? 1 : 0,
              }">
                <CaretRight class="icon" />
              </div>
            </div>
          </div>
          <div v-if="showRect" class="rectangle" :style="{
            left: `${rectStyle.left}px`,
            top: `${rectStyle.top}px`,
            width: `${rectStyle.width}px`,
            height: `${rectStyle.height}px`
          }"></div>
          <div class="multiple">
            {{ video_type_item_choice == 'wide' ? '广角' : video_type_item_choice == 'ir' ? '红外' : '变焦' }}
            {{ video_type_item_choice == 'wide' ? 1 : computedZoom }} X
          </div>
        </div>
        <div class="video-box-right">
          <!-- airport_c_icon.png -->
          <!-- 开始拍照：cameraPhotoTake
 结束拍照：cameraPhotoStop
 开始录像：cameraRecordingStart
 结束录像：cameraRecordingStop -->
          <!-- 切换相机模式
：cameraModeSwitch
cameraMode
多这一个参数 
{"0":"拍照","1":"录像","2":"智能低光","3":"全景拍照"} -->
          <div class="camera_component_box">

            <div class="type_box">
              <ElTooltip class="box-item" effect="dark" content="模式切换" placement="top">
                <div class="icon_box" @click="toggleCameraTypeShow">
                  <img class="img" :style="{ opacity: take_pic_time_ing ? '0.4' : '' }"
                    :src="getImageUrl(`airport_c_icon${camera_type}.png`)" />
                </div>
              </ElTooltip>
              <Transition name="fade">
                <div class="type_list_box" v-show="camera_type_show">
                  <div class="type_item" v-for="(item, index) in camera_list" :key="index"
                    @click="select_camera_type(index)">
                    <img class="img"
                      :src="getImageUrl(`airport_c_icon${camera_type == index ? 's' + index : index}.png`)">
                    <div class="text">
                      {{ item }}
                    </div>
                  </div>
                </div>
              </Transition>
              <Transition name="fade">
                <div class="time_list_box" v-show="camera_timeout_show">
                  <div class="time_item" v-for="(item, index) in camera_time_list" :key="index"
                    @click="select_timeout_type(index)" :class="{ choice: camera_time_index == index }">
                    {{ item }}S
                  </div>
                </div>
              </Transition>
            </div>
            <div class="button_box">
              <div class="button" :class="['button' + camera_type, { square: take_pic_time_ing }]" @click="take_pic">
                <div v-show="camera_type == 2">
                  {{ camera_time_S_show }}
                </div>
                <div v-show="camera_type == 3">SMART</div>
                <img class="img" v-show="camera_type == 4" :src="getImageUrl('airport_c_icon4b.png')" />
              </div>
            </div>
            <div class="recording_time_box" v-show="camera_type == 0 && take_pic_time_ing">
              {{ recording_time }}
            </div>
            <div class="percentage_box" v-show="camera_type == 4 && take_pic_time_ing">
              {{ pic_percentage }}%
            </div>
          </div>
          <div :data-highlight-mode="highlightMode" style="margin-bottom: 2vh;margin-left: 1vh;">
            <!-- <ElSlider style="height: 15vh;" vertical v-model="sliderZoom" :marks="sliderMarks" :min="1"
              :max="operation.cameraType == 'ir' ? 20 : 112" :show-tooltip="false" size="small" @input="onWheelChange"
              :disabled="take_pic_time_ing" /> -->
            <ElSlider style="height: 17vh;" vertical v-model="sliderValue" :marks="sliderMarks" :min="0" :max="100"
              size="small" :show-tooltip="false" :disabled="operation.cameraType == 'wide'"
              @input="onWheelChange(computedZoom)" />
            <!-- take_pic_time_ing ||  -->
          </div>
        </div>
      </div>
      <!-- <div class="video-footer"> -->
      <!-- <img class="img" @click="tanchuang = !tanchuang" src="../../../../../assets/airportTakeover_icon.png" />
          <span style="font-size: 1.8vh">82</span> -->
      <!-- {"0":"回中","1":"向下","2":"偏航回中","3":"俯仰向下"} -->
      <!-- <div style="padding-left: 5vh;width: 50%;">
          <ElSlider style="height: 20vh;" vertical v-model="sliderZoom" :marks="sliderMarks" :min="2"
            :max="operation.cameraType == 'ir' ? 20 : 112" :show-tooltip="false" size="small" @input="onWheelChange" />
        </div> -->
      <!-- <div class="tanchuang-box" v-show="tanchuang">
          <div class="tanchuang-box-header">
            官方AI算法
            <div class="tag-box">三方AI算法</div>
          </div>
          <div class="tanchuang-box-content">
            <div v-for="(item, index) in dataType" class="tanchuang-box-content-item" :key="index">
              <div>{{ item.name }}</div>
              <div style="display: flex; align-items: center">
                {{ item.num }}
                <img style="width: 2vh; height: 2vh; margin-left: 1vh"
                  src="../../../../../assets/airportTakeover_icon1.png" />
              </div>
            </div>
          </div>
        </div> -->
      <!-- </div> -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
// :deep(.el-slider.is-vertical .el-slider__marks-text) {
//   left: 5px;
// }
:deep(.custom-message) {
  position: absolute !important;
  top: 1vh;
}

:deep(.el-radio__input.is-checked+.el-radio__label) {
  color: #2873f0
}

// 滑动组件
:deep(.el-slider__runway) {
  background-color: transparent;
}

// :deep(.el-slider__marks) {
//   position: relative;
// }

:deep(.el-slider.is-vertical .el-slider__marks-text) {
  left: -4vh;
  width: 3vh;
  text-align: right;
  font-size: 1.5vh;
}

:deep(.el-slider__button) {
  border: 0;
  width: 1.5vh;
  height: 1.5vh;
}

:deep(.el-slider__stop) {
  border-radius: 0;
  height: 0.01vh;
  width: 0;

}

[data-highlight-mode="f56"] :deep(.el-slider__stop) {
  &:nth-child(5n) {
    width: 1vh;
  }

  &:nth-child(4n + 50) {
    width: 1vh;
  }

  &:nth-child(2n + 75) {
    width: 1vh;
  }

  @each $num in 1, 25, 50, 75, 100 {
    &:nth-child(#{$num}) {
      width: 1.6vh;
      left: -0.3vh;
    }
  }
}

[data-highlight-mode="ir"] :deep(.el-slider__stop) {
  &:nth-child(5n) {
    width: 1vh;
  }

  &:nth-child(4n + 50) {
    width: 1vh;
  }

  &:nth-child(3n + 75) {
    width: 1vh;
  }

  @each $num in 1, 25, 50, 75, 100 {
    &:nth-child(#{$num}) {
      width: 1.6vh;
      left: -0.3vh;
    }
  }
}

[data-highlight-mode="f112"] :deep(.el-slider__stop) {
  &:nth-child(5n) {
    width: 1vh;
  }

  &:nth-child(4n + 40) {
    width: 1vh;
  }

  &:nth-child(2n + 60) {
    width: 1vh;
  }

  @each $num in 1, 20, 40, 60, 80, 100 {
    &:nth-child(#{$num}) {
      width: 1.6vh;
      left: -0.3vh;
    }
  }
}

// :deep(.el-slider__stop) {
// &:nth-child(5n) {
//   width: 1vh;
// }

// &:nth-child(4n + 40) {
//   width: 1vh;
// }

// &:nth-child(2n + 60) {
//   width: 1vh;
// }

// // 特定位置设置
// @each $num in 1, 20, 40, 60, 80, 100 {
//   &:nth-child(#{$num}) {
//     width: 1.6vh;
//     left: -0.3vh;
//   }
// }
// }

// :deep(.el-slider__stop) {
//   width: 1vh;
// }

// :deep(.el-slider__stop):nth-child(56) {
//   width: 1.5vh;
// }

// :deep(.el-slider__stop):nth-child(93) {
//   width: 1.5vh;
// }

// :deep(.el-slider__stop):first-child {
//   width: 1.6vh;
//   left: -0.3vh;

// }

// :deep(.el-slider__stop):last-child {
//   width: 1.6vh;
//   left: -0.3vh;
// }

:deep(.el-slider__bar) {
  background-color: transparent;
}

// :deep(.el-slider.is-vertical .el-slider__button-wrapper) {
//   transform: translateY(40%);
// }

.container-box {
  height: 100%;
  user-select: none;

  .vertical-line {
    width: 0;
    height: 4vh;
    margin: 0 1vh;
    border-left: 0.01vh solid #213d3e;
  }

  .container-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 4vh;
    font-family: PingFangSC, 'PingFang SC';
    font-size: 1.8vh;
    font-style: normal;
    font-weight: 500;
    color: #fffefe;

    &-left {
      display: flex;
      align-items: center;
      margin-left: 1vh;

      .circle {
        width: 0.5vh;
        height: 0.5vh;
        background-color: #f5bf1c;
        border-radius: 0.5vh;
      }

      .text {
        margin-left: 1vh;
        font-family: PingFangSC, 'PingFang SC';
        font-size: 1.8vh;
        font-style: normal;
        font-weight: 400;
        color: #fffefe;
      }
    }

    &-right {
      display: flex;
      align-items: center;
      font-family: PingFangSC, 'PingFang SC';
      font-size: 1.5vh;
      font-style: normal;
      font-weight: 400;
      color: #fffefe;
      text-align: left;
      text-transform: none;
    }
  }

  .container-content {
    width: 100%;
    height: calc(100% - 4vh);
    overflow: hidden;
    background-color: #021314;

    // .video-header {
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   width: 100%;
    //   height: 25px;
    //   font-family: Avenir, Avenir;
    //   font-size: 12px;
    //   font-style: normal;
    //   font-weight: 300;
    //   color: #fefefe;
    // }

    .video {
      width: 100%;
      height: calc(100%);
      display: flex;
      position: relative;

      .videoBox {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #000000;
        object-fit: fill;

        // :deep(.video-wrapper) {
        //   width: 100%;
        //   height: 100%;
        //   padding-bottom: 0 !important;
        // }
      }

      .video-box-left {
        height: 100%;
        width: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .video_type {

          .video_type_item {
            font-size: 1.3vh;
            padding: 0.5vh 1vh;
            margin-bottom: 0.5vh;
            border-radius: 0.5vh;
            border: 0.1vh solid #9d9d9d;
            user-select: none;
            cursor: pointer;
          }

          .choice {
            border: 0.1vh solid #228efa;
            color: #228efa;
          }

          .choice.clock {
            border: 0.1vh solid #adadad;
          }

          .clock {
            color: #adadad;
            cursor: wait;
          }
        }

        .video_direction {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-top: 2vh;
          font-size: 1.3vh;
          user-select: none;

          .video_direction_list {
            cursor: pointer;
            left: 8vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 10vh;
            background-color: rgba(2, 19, 20, 0.5);
            padding-top: 1vh;

            .video_direction_item {
              font-size: 1.3vh;
              padding: 0.5vh 1vh;
              margin-bottom: 0.5vh;
              border-radius: 0.5vh;
              border: 0.1vh solid #9d9d9d;
            }

            .choice {
              border: 0.1vh solid #228efa;
              color: #228efa;
            }

            .choice.clock {
              border: 0.1vh solid #adadad;
            }

            .clock {
              border: 0.1vh solid #8b8b8b;
              color: #8b8b8b;
              cursor: wait;
            }
          }
        }

        .hanhuaqi_box {
          margin-top: 2vh;
          padding: 0.5vh 1.2vh;
          margin-bottom: 0.5vh;
          border-radius: 0.5vh;
          border: 0.1vh solid #9d9d9d;
          position: relative;

          .icon {
            width: 2vh;
            cursor: pointer;
          }

          .hanhuaqi_tc_box {
            position: fixed;
            z-index: 99;
            width: 20vh;
            background-color: #093033;
            padding: 1vh;
            border-radius: 0.5vh;
            // border: 0.1vh solid ;

            .header_box {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .left_box {
                display: flex;
                align-items: center;
                justify-content: center;

                .icon_x {
                  width: 2vh;
                  height: 2vh;
                  cursor: pointer;
                }
              }

              .center_box {}

              .right_box {
                .icon_x {
                  width: 2vh;
                  height: 2vh;
                  cursor: move;
                }
              }
            }

            .content_box {
              .input_box {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 1vh 0;
              }

              .button_box {
                display: flex;
                align-items: center;
                justify-content: center;

                .button {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 100%;
                  height: 4vh;
                  font-size: 1.5vh;
                  white-space: nowrap;
                  background-color: #07484e;
                  cursor: pointer;
                }

                .disabled {
                  background-color: #476b6e;
                  cursor: wait;
                }
              }

              .volume_box {
                .volume_icon {
                  width: 2vh;
                  height: 2vh;
                }

                display: flex;
                align-items: center;

                :deep(.el-slider__runway) {
                  background-color: #07484e;
                }
              }
            }
          }
        }
      }

      .video-box-center {
        height: 100%;
        width: calc(100% - 20vh);
        cursor: move;
        position: relative;
        background-color: #151515;


        .icon_box {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 1vh;
          height: 1vh;

          .icon_content {
            position: relative;
            width: 1vh;
            height: 1vh;
            left: -0.5vh;
            top: -0.5vh;

            .circle_box {
              background-color: #67C23A;
              width: 1vh;
              height: 1vh;
              border-radius: 1vh;
            }

            .CaretRight_box {
              position: absolute;
              top: -0.5vh;
              left: 0.5vh;
              width: 2vh;
              height: 2vh;
              transform-origin: left center;

              .icon {
                color: #67C23A;
              }
            }
          }
        }

        .onceClick_box {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;

          .content {
            position: relative;
            width: 5vh;
            height: 5vh;
            top: -2.5vh;
            left: -2.5vh;

            .box {
              width: 1.5vh;
              height: 1.5vh;
              position: absolute;
            }

            .box1 {
              top: 0;
              left: 0;
              border-top: 0.1vh solid #FFFFFF;
              border-left: 0.1vh solid #FFFFFF;
            }

            .box2 {
              top: 0;
              right: 0;
              border-top: 0.1vh solid #FFFFFF;
              border-right: 0.1vh solid #FFFFFF;
            }

            .box3 {
              bottom: 0;
              right: 0;
              border-bottom: 0.1vh solid #FFFFFF;
              border-right: 0.1vh solid #FFFFFF;
            }

            .box4 {
              left: 0;
              bottom: 0;
              border-bottom: 0.1vh solid #FFFFFF;
              border-left: 0.1vh solid #FFFFFF;
            }
          }
        }

        .twiceClick_box {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;

          .content {
            position: relative;
            width: 4vh;
            height: 4vh;
            top: -2vh;
            left: -2vh;
            border: 0.1vh solid #FFFFFF;
          }
        }

        .rectangle {
          position: absolute;
          border: 0.1vh solid rgb(30, 100, 21);
          // background-color: rgba(255, 0, 0, 0.1);
          pointer-events: none;
          /* 防止矩形干扰鼠标事件 */
        }

        .multiple {
          position: absolute;
          top: 6vh;
          left: 50%;
          transform: translateX(-2vw);
          border: 1px solid #ffffff;
          background-color: rgb(0, 0, 0, 0.3);
          border-radius: 0.5vh;
          font-size: 1.8vh;
          color: #ffffff;
          // width: 6vw;
          text-align: center;
          padding: 0.5vh 1vh;
        }
      }


      .video-box-right {
        height: 100%;
        width: 10vh;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;

        .camera_component_box {
          width: 5vw;
          // background-color: #00bebf;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          position: relative;
          margin-bottom: 5vh;

          /* 定义淡入淡出过渡效果 */
          .fade-enter-active,
          .fade-leave-active {
            transition: opacity 0.3s ease-out;
          }

          .fade-enter-from,
          .fade-leave-to {
            opacity: 0;
          }

          .type_box {
            position: relative;
            width: 100%;
            padding: 2vh 0;

            .icon_box {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;

              .img {
                width: 3.5vh;
                cursor: pointer;
              }
            }

            .type_list_box {
              position: absolute;
              z-index: 5;
              top: 0;
              right: 9vh;
              width: 8vh;
              padding: 1vh 0;
              background-color: rgba(2, 19, 20, 0.5);
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;

              .type_item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                margin-bottom: 1.3vh;
                cursor: pointer;

                .img {
                  width: 2.5vh;
                  height: 2.5vh;
                  margin-bottom: 0.5vh;
                }

                .text {
                  font-size: 1.5vh;
                  user-select: none;
                }
              }

              .choice {
                color: #2a80da;
              }
            }

            .time_list_box {
              position: absolute;
              z-index: 5;
              top: 0;
              right: 17vh;
              width: 6vh;
              padding: 1vh 0;
              background-color: rgba(2, 19, 20, 0.5);
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;

              .time_item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                margin-bottom: 1vh;
                cursor: pointer;
                user-select: none;
                font-size: 1.5vh;
              }

              .choice {
                color: #2a80da;
              }
            }
          }

          .button_box {
            border: 0.1vh solid #FFFFFF;
            border-radius: 5vh;
            width: 5vh;
            height: 5vh;
            margin-bottom: 2vh;
            display: flex;
            align-items: center;
            justify-content: center;

            .button {
              border-radius: 5vh;
              background-color: #FFFFFF;
              width: 4.3vh;
              height: 4.3vh;
              cursor: pointer;
              display: flex;
              user-select: none;
              align-items: center;
              justify-content: center;
              color: #000000;
            }

            .button0 {
              background-color: #ff0000;
            }

            .button2 {
              font-size: 1.5vh;
            }

            .button3 {
              font-size: 1.1vh;
              font-weight: bold;
            }

            .button4 {
              display: flex;
              align-items: center;
              justify-content: center;

              .img {
                width: 3.5vh;
              }
            }

            .square {
              width: 2.5vh;
              height: 2.5vh;
              border-radius: 0.5vh;
              font-size: 1.2vh;
            }
          }

          .recording_time_box {
            position: absolute;
            top: 13vh;
            font-size: 1.5vh;
          }

          .percentage_box {
            position: absolute;
            top: 13vh;
            font-size: 1.5vh;
          }
        }
      }
    }

    .video-footer {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 4vh;

      .img {
        width: 2vh;
        height: 2vh;
        margin-right: 1.5vh;
        margin-left: 1vh;
        cursor: pointer;
      }

      .tanchuang-box {
        position: absolute;
        bottom: 3.5vh;
        left: 1.5vh;
        width: 13vw;
        height: 22vh;
        background-color: rgb(0 0 0 / 60%);

        .tanchuang-box-header {
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 100%;
          height: 4vh;
          font-family: PingFangSC, 'PingFang SC';
          font-size: 1.8vh;
          font-weight: 400;
          color: #fff;
          text-align: left;
          background-color: #1d2121;

          .tag-box {
            padding: 0.5vh 1vh;
            background-color: #00bebf;
          }
        }

        .tanchuang-box-content {
          &-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 4vh;
            padding: 0 1vh;
            font-family: PingFangSC, 'PingFang SC';
            font-size: 1.6vh;
            font-weight: 400;
            color: #fff;
            text-align: left;
          }
        }
      }
    }
  }
}
</style>
